<template>
	<view :style="{'min-height':h+'px','padding-top':mt+'px'}">
		<c-nav-bar title="订单详情" bgColor="#0EBFFE"></c-nav-bar>
		<view class="bg"></view>
		<view class="content">
			<view class="head">
				<text class="status" v-if="myList.orderStatus=='0'">待支付</text>
				<text class="status" v-if="myList.orderStatus=='-1'">已取消</text>
				<text class="status" v-if="myList.orderStatus=='-2'">退款中</text>
				<text class="status" v-if="myList.orderStatus=='1'">订单待确认</text>
				<text class="status" v-if="myList.orderStatus=='2'">待使用</text>
				<text class="status" v-if="myList.orderStatus=='-3'">已退款</text>
				<text class="status" v-if="myList.orderStatus=='3'">已完成</text>
				<text>￥</text>
				<text>{{myList.realityPay}}</text>
			</view>
			<view class="ticketInfo">
				<view class="name">
					{{myList.routeName}}
				</view>
				<view class="type">
					<span>￥{{myList.orderAmount}}</span>
					<span>×1</span>
				</view>
				<view class="date">
					<text>游玩日期</text>
					<text>{{myList.reserveDate}}</text>
					<text>{{week}}</text>
				</view>
			</view>
			<view class="voucherCode">
				<view class="title">
					<text>凭证码</text>
					<text class="orange" v-if="myList.orderStatus==3||myList.orderStatus=='2'">可直接验证使用</text>
				</view>
				<view class="codeList">
					<view class="listItem" v-if="myList.orderStatus==3||myList.orderStatus=='2'">
						<view class="codeList_right" v-if="myList.orderStatus=='2'">
							<image :src="myList.qrCode" mode="scaleToFill" style="width: 121px;height: 119px;"
								@click="show=true"></image>
							<span>核销码 {{myList.verifyCode}}</span>
						</view>
						<view class="codeList_right" v-if="myList.orderStatus==3">
							<image :src="myList.qrCode" mode="scaleToFill"
								style="width: 121px;height: 119px;opacity: 0.5;"></image>
							<span style="opacity: 0.5;text-decoration: line-through;">辅助码 {{myList.verifyCode}}</span>
						</view>
						<u-popup :show="show" @close="()=>{
								show=!show
							}" mode="center" :closeable='true'>
							<view class="warp">
								<view class="title">凭证二维码</view>
								<view class="rect">
									<image :src="myList.qrCode" style="width:266rpx;height:266rpx;"></image>
								</view>
							</view>
						</u-popup>
					</view>

				</view>
			</view>
			<!-- 联系人信息 -->
			<view class="orderInfo">
				<view class="tit">联系人信息</view>
				<u-cell :border="false" class='cell'>
					<text slot="icon" class="txt">姓名</text>
					<text slot="title" class="val">{{myList.linkName||'周杰伦'}}</text>
				</u-cell>
				<u-cell :border="false" class='cell'>
					<text slot="icon" class="txt">手机号码</text>
					<text slot="title" class="val">{{myList.linkPhone||'13888889999'}}</text>
				</u-cell>
			</view>
			<!-- 订单信息 -->
			<view class="orderInfo">
				<view class="tit">订单信息</view>
				<u-cell :border="false" class='cell'>
					<text slot="icon" class="txt">订单编号</text>
					<text slot="title" class="val">
						{{myList.orderCode}}
						<text class="copy" @click="copyOrderId()">复制</text>
					</text>
				</u-cell>
				<u-cell :border="false" class='cell'>
					<text slot="icon" class="txt">下单时间</text>
					<text slot="title" class="val"> {{myList.createDate}}</text>
				</u-cell>
			</view>
		</view>
		<view class="btns">
			<template v-if="myList.orderStatus==0">
				<u-button shape="circle" type="info" :plain="true" size='large' text="取消订单" class="b_"
					@click="cancelOrder()"></u-button>
				<u-button color="#01B9F9" shape="circle" type="primary" :plain="true" size='large' text="立即支付"
					class="b_" @click="handlePay()"></u-button>
			</template>
			<template v-else-if="myList.orderStatus==2">
				<u-button shape='circle' type="info" size='large' :plain="true" text="申请退订"
					@click="goTotuikuan()"></u-button>
				<u-button shape='circle' type="primary" size='large' :plain="true" @click="orderAgain()"
					text="再次预订"></u-button>
			</template>
			<template v-else>
				<u-button shape='circle' type="primary" size='large' :plain="true" @click="orderAgain()"
					text="再次预订"></u-button>
			</template>
		</view>
		<!-- 支付页面 -->
		<u-popup :show="payShow" @close="payShow=false">
			<view class="details details_pay">
				<view class="middle">
					<view class="title">
						<text>请选择</text>
						<image src="@/static/index/steamerTicket/icon_close.png" @tap="payShow=false"></image>
					</view>
					<view class="wechat_pay">
						<view class="wp_left">
							<image src="@/static/index/steamerTicket/img_pay.jpg" mode=""></image>
							<text>微信支付</text>
						</view>
						<image src="@/static/index/steamerTicket/img_selected.jpg" mode=""></image>
					</view>
				</view>
				<view class="pay_submit" @tap="toPay">确定</view>
			</view>
		</u-popup>
		<GetPhoneNumber ref="phoneNumber" @loginSuccess="loginSuccess"></GetPhoneNumber>
	</view>
</template>

<script>
	import GetPhoneNumber from '@/compoments/Getphonenumber/index.vue'
	export default {
		components: {
			GetPhoneNumber
		},
		data() {
			return {
				h: uni.getSystemInfoSync().windowHeight,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				payShow: false,
				qrcodeData: 'https://i.ringzle.com/file/20231028/ef44bb2c438a49ee859d570dee881b80.jpeg',
				orderCode: '',
				myList: {},
				show: false,
				week: ''
			}
		},
		onLoad(option) {
			this.orderId = option.orderCode
			this.getList()
		},
		computed: {

		},
		methods: {
			cancelOrder() {

				this.$api.post('/api/guide/cancelOrder/', {
					orderCode: this.orderId
				}).then(res => {
					if (res.data.code == 0) {
						uni.showToast({
							title: '取消成功',
							icon: 'success'
						})
						this.getList()
					} else {
						uni.showToast({
							title: '取消失败，请重试',
							icon: 'none'
						})
						this.getList()
					}
				})
			},
			handlePay() {
				this.payShow = true
			},
			goTotuikuan() {
				uni.navigateTo({
					url: '/pagesMy/guideServe/refundReason?id=' + this.orderId
				})
			},
			toHref(url) {
				uni.navigateTo({
					url: url
				})
			},
			getList() {
				this.$api.get('/api/guide/selectOrderDetail/' + this.orderId)
					.then(res => {
						console.log(res, '====');
						if (res.data.code == 0) {
							this.myList = res.data.data
							this.orderCode = res.data.data.orderCode
						}
						// this.myList.playDate = res.data.data.playDate.split(' ')[0]
						// this.handlePrivacy(this.myList)
						this.week = this.getDayOfWeek(this.myList.reserveDate)
						this.myList.linkPhone = res.data.data.linkPhone.substring(0, 3) +
							'****' + res.data.data.linkPhone.substring(7)
						this.myList.linkName = '*' + res.data.data.linkName.substring(1)

					})
			},
			handlePrivacy(params) {
				params.ticketList.forEach((i, index) => {
					this.myList.ticketList[index].idCode = params.ticketList[index].idCode.substring(0, 6) +
						'********' + params.ticketList[index].idCode.substring(13)
					this.myList.ticketList[index].realName = '*' + params.ticketList[index].realName.substring(1)
				})
			},
			getDayOfWeek(dateString) {
				const date = new Date(dateString);
				const daysOfWeek = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
				const dayOfWeek = daysOfWeek[date.getDay()];
				return dayOfWeek;
			},
			toPay() {
				this.lsKey = 'toPay';
				this.$login().then(res => {
					if (res === 0) return this.confrimPay();
				})
			},
			confrimPay(item) {
				this.$api.post('/order/icbc/createOrder', {
					orderCode: this.orderCode,
					tradeType: 'JSAPI',
					openId: JSON.parse(uni.getStorageSync('userInfo')).openId
				}, false).then(res => {
					if (res.statusCode == 200 && res.data != null) {
						this.payShow = false;
						this.$wxPay(res.data).then(result => {
							uni.navigateTo({
								url: `${'/pages/index/guide/paySuccess?orderId='+this.orderId+'&realityPay='+this.myList.realityPay}`

							})
						})
					}
				})
			},
			orderAgain() {
				uni.navigateTo({
					url: '/pages/index/guide/index'
				})
			},
			copyOrderId() {
				uni.setClipboardData({
					data: this.myList.orderCode,
					success() {
						uni.showToast({
							title: '复制成功',
							icon: 'success'
						});
					},
					fail() {
						uni.showToast({
							title: '复制失败',
							icon: 'none'
						});
					}
				})
			},
			deleteOrder() {
				console.log('111');
				this.$api.get('/api/scenic/delOrder/' + this.orderId).then((res) => {
					if (res.data.code == 0) {
						uni.showToast({
							title: res.data.data,
							icon: 'success',
							duration: 2000,
							success() {
								uni.navigateTo({
									url: '/pagesMy/order/index'
								})
							},

						});

					} else {
						uni.showToast({
							title: res.data.data,
							icon: 'none',
							duration: 2000,
							success() {
								uni.navigateTo({
									url: '/pagesMy/order/index'
								})
							},

						});
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #F5F8FA;

		.content {
			position: relative;
			z-index: 3;
			padding-bottom: 160rpx;
		}
	}

	.grey {

		.icon .pingzheng .name .ticketType {
			color: #e0e0e0 !important;
		}
	}

	.bg {
		height: 100%;
		position: fixed;

		z-index: 1;
		width: 100%;
		background-image: linear-gradient(to bottom, #0EBFFE 0%, #01D1EA 20%, #F5F8FA 50%);
	}

	.orderInfo {
		background-color: #fff;
		border-radius: 16rpx;
		width: 96%;
		margin: 0 auto 23rpx;



		.cell {
			display: flex;
			justify-content: space-between;
		}

		.tit {
			font-size: 32rpx;
			color: #333;
			padding-left: 30rpx;
			padding-top: 40rpx;
			font-weight: 600;
			margin-bottom: 20rpx;
		}

		.txt {
			font-size: 28rpx;
			color: #666;
		}

		.icon {
			font-size: 28rpx;
			color: #666;
		}

		.val {
			font-size: 28rpx;
			width: 94%;
			text-align: end;

			.copy {
				color: #c5c5c5;
				border: #e5e5e5 1rpx solid;
				margin-left: 5rpx;
				width: 70rpx;
				height: 32rpx;
				border-radius: 23rpx;
				font-size: 20rpx;
				display: inline-block;
				text-align: center;
				line-height: 32rpx;
			}
		}
	}

	.voucherCode_colse {
		padding: 20rpx;

		.title {

			height: 80rpx;
			font-weight: 600;
			font-size: 31rpx;
			color: #333;
			padding: 20rpx 30rpx;
			line-height: 80rpx;
			background: #fff;
			border-radius: 20rpx;
		}

		.title_info {
			line-height: 80rpx;
			font-weight: 600;
			font-size: 34rpx;
			color: #333;
			padding: 0 10rpx;
		}

		.codeList {
			margin-top: 19rpx;
			padding: 20rpx;
			background: #fff;
			border-radius: 20rpx;
		}

		.listItem {
			height: 52rpx;
			display: flex;
			justify-content: space-between;
			padding: 0rpx 15rpx;

			font-size: 26rpx;
			color: #666;
			align-items: center;

			.ticketType {
				margin-left: 20rpx;
				font-weight: 400;
				color: #94A9C8;
				line-height: 33rpx;
				height: 33rpx;
				font-size: 24rpx;
				background: #F5F8FA;
				border-radius: 8rpx;
				padding: 4rpx;
			}
		}


	}

	.voucherCode {
		margin: 20rpx 23rpx;
		padding: 44rpx 24rpx 20rpx;
		border-radius: 20rpx;
		background-color: #fff;
		z-index: 2;

		.title {
			font-weight: 600;
			font-size: 34rpx;
			color: #333;
		}

		.codeList {
			.listItem {
				height: 240rpx;
				display: flex;
				justify-content: center;
				padding: 0rpx 20rpx 20rpx;
				font-size: 26rpx;
				color: #666;
				margin: 20rpx 0;
				align-items: center;

				.codeList_left {
					position: relative;
					color: #777777;
					line-height: 30rpx;

					.pingzheng {
						margin-top: 67rpx;
					}

					.icon {
						position: absolute;
						width: fit-content;
						font-weight: 400;
						color: #94A9C8;
						line-height: 33rpx;
						height: 33rpx;
						font-size: 24rpx;
						border-radius: 8rpx;
						padding: 4rpx;
					}

					.name {
						font-size: 32rpx;
						font-family: PingFang-SC-Bold, PingFang-SC;
						font-weight: bold;
						color: #333333;
						line-height: 45rpx;
						margin: 20rpx 0;

						.ticketType {
							margin-left: 20rpx;
							font-weight: 400;
							color: #94A9C8;
							line-height: 33rpx;
							height: 33rpx;
							font-size: 24rpx;
							background: #F5F8FA;
							border-radius: 8rpx;
							padding: 4rpx;

						}
					}
				}

				.codeList_right {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 100%;
					flex-direction: column;
					font-weight: bold;
				}

			}
		}


	}

	.orange {
		color: #FF7D01;
		margin-left: 30rpx;
		font-size: 26rpx;
	}

	.ticketInfo {
		margin: 0px 23rpx;
		padding: 44rpx 24rpx 20rpx;
		border-radius: 20rpx;
		position: relative;
		background-color: #fff;
		z-index: 2;

		.name {
			font-weight: 600;
			font-size: 34rpx;
			color: #333;

			.ticketType {
				margin-left: 20rpx;
			}
		}

		.date {
			padding-bottom: 20rpx;

			text {
				font-size: 26rpx;

				&:nth-child(1) {
					color: #808080;
				}

				&:nth-child(2) {
					color: #FF7D01;
					margin-left: 30rpx;
				}

				&:nth-child(3) {
					color: #FF7D01;
					margin-left: 15rpx;
				}
			}
		}

		.position {
			padding: 20rpx 0;
			font-size: 26rpx;
			color: #808080;

		}

		.type {
			padding: 14rpx 0;
			font-weight: 600;
			font-size: 34rpx;
			color: #333;
			width: 100%;
			display: flex;
			justify-content: space-between;
		}

		.prices {

			.txt,
			.num {
				color: #666;
				font-size: 26rpx;
			}

			.txt {
				margin-left: -30rpx;
			}

			.num {
				margin-right: -30rpx;
			}
		}


	}

	.topHead {
		width: 96%;
		margin: 0 auto;
		background-color: #F5F8FA;
		padding: 28rpx 0 28rpx 84rpx;
		border-radius: 16rpx;
		position: relative;

		text {
			position: absolute;
			left: 0;
			top: 0;
			z-index: 1;
			border-radius: 16rpx 0 0 16rpx;
			width: 48rpx;
			color: #fff;
			font-size: 20rpx;
			background-color: #484F61;
			text-align: center;
			height: 100%;
			padding: 15rpx 10rpx 0;

		}

		.p {
			font-size: 28rpx;
			color: #333;

			&:nth-of-type(1) {
				font-weight: 600;
				margin-bottom: 16rpx;
			}
		}


	}

	.code {
		margin-top: 40rpx;
		text-align: center;
		position: relative;

		.cover,
		.sx {
			position: absolute;
			background-color: rgba(255, 255, 255, 0.5);
			width: 340rpx;
			height: 340rpx;
			top: 66rpx;
			left: 50%;
			transform: translate(-50%, 0);
		}

		.sx {
			width: 120rpx;
			height: 120rpx;
			top: 150rpx;
			background: transparent;
		}

		.txt {
			font-size: 28rpx;
		}

		image {
			width: 340rpx;
			height: 340rpx;
			margin: 30rpx 0;
		}
	}

	.head.data-v-4aeef636 {
		background: #0EBFFE;
	}

	.head {
		padding: 29rpx 40rpx;
		display: flex;
		position: relative;
		z-index: 2;

		text {
			color: #fff;

			&:nth-child(1),
			&:nth-child(3) {
				font-size: 34rpx;
			}

			&:nth-child(2) {
				flex: 1;
				text-align: right;
				width: 100px;
				font-size: 36rpx;
			}
		}
	}

	.btns {
		position: fixed;
		bottom: 0;
		z-index: 4;
		left: 0;
		display: flex;
		padding: 16rpx;
		background-color: #fff;
		gap: 0 20rpx;
		box-shadow: 0 -8rpx 16rpx rgba(0, 0, 0, 0.06);
		width: 750rpx;

		.b_ {
			width: 220rpx;
			max-width: 220rpx;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 16rpx;
			color: #333
		}
	}

	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 458rpx;
		height: 442rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		flex-direction: column;

		.title {
			text-align: center;
			font-size: 32rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #333333;
			line-height: 32rpx;
			height: 76rpx;

		}
	}

	/deep/.u-popup__content.data-v-3a231fda {
		border-radius: 24rpx;
	}

	.rect {
		margin-top: 14rpx;
	}

	/deep/.u-button--large.data-v-2bf0e569 {
		margin: 0 20rpx;

	}

	.details {
		padding: 40rpx 30rpx;
		height: 405px;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.title {
			position: relative;
			text-align: center;

			text {
				font-size: 36rpx;
				font-family: PingFang-SC-Bold, PingFang-SC;
				font-weight: bold;
				color: #333333;
			}

			image {
				width: 36rpx;
				height: 36rpx;
				position: absolute;
				right: 10rpx;
				top: 50%;
				margin-top: -18rpx;
			}
		}

		.address {
			font-size: 32rpx;
			font-family: PingFang-SC-Bold, PingFang-SC;
			font-weight: bold;
			color: #333333;
			margin-top: 48rpx;
		}

		.tickets {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 42rpx;

			&>text {
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #777777;
			}

			&>view {
				font-size: 28rpx;
				font-family: PingFang-SC-Bold, PingFang-SC;
				font-weight: bold;
				color: #333333;

				span {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #777777;
				}
			}
		}

		.total {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 61rpx;

			text {
				font-size: 32rpx;
				font-family: PingFang-SC-Bold, PingFang-SC;
				font-weight: bold;
				color: #333333;
			}

			view {
				height: 36rpx;
				font-size: 32rpx;
				font-family: PingFang-SC-Bold, PingFang-SC;
				font-weight: bold;
				color: #333333;
			}
		}

		.d_middle {
			padding: 40rpx 0 150rpx;

			&>view {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 40rpx 0;

				&:first-child {
					border-bottom: 1rpx solid #EFEFEF;
				}

				&>text {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
				}

				&>view {
					font-size: 30rpx;
					font-family: PingFang-SC-Bold, PingFang-SC;
					font-weight: bold;
					color: #333333;
					display: flex;
					align-items: center;

					span {
						font-size: 26rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #777777;
						margin-left: 10rpx;
					}
				}
			}
		}

		&.details_pay {
			background: #F6F6F6;

			.wechat_pay {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 83rpx;
				background: #FFFFFF;
				border-radius: 24rpx 24rpx 0rpx 0rpx;
				padding: 41rpx 24rpx;

				.wp_left {
					display: flex;
					align-items: center;

					image {
						width: 54rpx;
						height: 54rpx;
					}

					text {
						font-size: 32rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
						margin-left: 24rpx;
					}
				}

				&>image {
					width: 48rpx;
					height: 48rpx;
				}
			}

			.pay_submit {

				height: 92rpx;
				background: #007A69;
				border-radius: 46rpx;
				line-height: 92rpx;
				text-align: center;
				font-size: 32rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				letter-spacing: 2rpx;
			}
		}

		.has_info {
			.add_user {
				height: 88rpx;
				border-radius: 16rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background: #fff;
				margin-top: 48rpx;
				border: 1rpx dotted #007A69;

				image {
					width: 30rpx;
					height: 30rpx;
					margin-right: 12rpx;
				}

				text {
					font-size: 32rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #007A69;
					margin-left: 12rpx;
					letter-spacing: 2rpx;
				}
			}

			.add_list {
				padding-top: 30rpx;
				max-height: 478rpx;
				overflow-y: auto;
				.sac_item {
					display: flex;
					align-items: center;
					padding: 36rpx 24rpx;

					.chk {
						width: 38rpx;
						height: 38rpx;
					}

					.si_info {
						width: calc(100% - 96rpx);
						padding-left: 22rpx;

						.name {
							display: flex;
							align-items: center;

							view:first-child {
								font-size: 32rpx;
								font-family: PingFang-SC-Bold, PingFang-SC;
								font-weight: bold;
								color: #111111;
								line-height: 32rpx;
							}

							view:last-child {
								padding: 6rpx 8rpx;
								line-height: 24rpx;
								text-align: center;
								background: #F5F8FA;
								border-radius: 8rpx;
								font-size: 24rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #94A9C8;
								margin: 5rpx 0 0 28rpx;
							}
						}

						.idcard {
							margin-top: 20rpx;

							&>text {
								font-size: 24rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #111111;
								line-height: 24rpx;

								&:first-child {
									color: #AAAAAA;
									margin-right: 10rpx;
								}
							}
						}
					}

					.edit {
						width: 36rpx;
						height: 36rpx;
					}
				}
			}
		}

		.add_submit {
			width: calc(100% - 60rpx);
			height: 88rpx;
			background: #007A69;
			border-radius: 44rpx;
			position: fixed;
			bottom: 69rpx;
			font-size: 32rpx;
			font-family: PingFang-SC-Bold, PingFang-SC;
			font-weight: bold;
			color: #FFFFFF;
			line-height: 88rpx;
			text-align: center;
		}
	}
</style>